<template>
  <div :class="prefixCls">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)">
    </quill-editor>
    <a-upload
      id="upload"
      style="display: none"
      name="file"
      :multiple="true"
      :action="upload"
      :headers="headers"
      @change="handleChange"
    >
      <a-button> <a-icon type="upload" /> Click to Upload </a-button>
    </a-upload>
  </div>
</template>

<script>
import storage from 'store'
import { quillEditor } from 'vue-quill-editor'
import { container } from 'quill-image-extend-module'
import apis from '@/api'
import { ACCESS_TOKEN } from '@/store/mutation-types'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'QuillEditor',
  components: {
    quillEditor
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill'
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String
    }
  },
  data () {
    return {
      content: null,
      headers: {
        'Access-Token': storage.get(ACCESS_TOKEN)
      },
      upload: apis.Upload,
      editorOption: {
        // some quill options
        modules: {
          toolbar: {
            container: container,
            handlers: {
              'image': value => {
                if (value) {
                  document.querySelector('.ant-upload .ant-upload .ant-btn').click()
                } else {
                  this.$refs.myQuillEditor.quill.format('image', false)
                }
              }
            }
          }
        },
        theme: 'snow',
        placeholder: '请输入帖子内容'
      }
    }
  },
  methods: {
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      this.content = this.value
    },
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.$emit('change', html)
    },
    handleChange (info) {
      if (info.file.status === 'done') {
        // this.invoiceForm['voice_electronic_file'] = info.file.response.result.url
        const length = this.$refs.myQuillEditor.quill.getSelection().index
        this.$refs.myQuillEditor.quill.insertEmbed(length, 'image', info.file.response.result.url)
        this.$refs.myQuillEditor.quill.setSelection(length + 1)
      }
    }
  },
  watch: {
    value (val) {
      this.content = val
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../index.less');

/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
.ant-editor-quill {
  line-height: initial;
  /deep/ .ql-toolbar.ql-snow {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }
  /deep/ .ql-container.ql-snow {
    border-radius: 0 0 @border-radius-base @border-radius-base;
    height: 350px;
  }
}
</style>
